import React, {useEffect, useState} from 'react';
import {View, Text, TouchableOpacity, Image, ScrollView} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import OrderPrdList from '../../components/OrderPrdList';
import styles from './style';
import {resetPay} from '../../service/home';

const InvoiceDetail = (props) => {
  const navigation = useNavigation();
  const [courseData, setCourseData] = useState({});
  const {
    route: {
      params: {orderId},
    },
  } = props;
  useEffect(() => {
    const _fn = async () => {
      await resetPay({orderId}).then((res) => {
        console.log(res);
        setCourseData(res.data);
      });
    };
    _fn();
  }, []);
  return (
    <AreaView>
      <ScrollView showsVerticalScrollIndicator={false} style={styles.scroll}>
        <View style={styles.head}>
          <View style={styles.head_btn}>
            <Text style={styles.btn_text}>已开票</Text>
          </View>
          <Text style={styles.money}>
            已开发票金额：{courseData?.actualPrice}元
          </Text>
          <Text style={styles.name}>增值税电子普通发票</Text>
          <View style={styles.step}>
            <View style={styles.step_list}>
              <View style={styles.icon_container}>
                <Image
                  source={require('../../assets/images/result.png')}
                  style={styles.icon}
                />
              </View>
              <Text style={styles.step_text}>订单提交</Text>
            </View>
            <View style={styles.line} />
            <View style={styles.step_list}>
              <View style={styles.icon_container}>
                <Image
                  source={require('../../assets/images/result.png')}
                  style={styles.icon}
                />
              </View>
              <Text style={styles.step_text}>订单完成</Text>
            </View>
            <View style={styles.line} />
            <View style={styles.step_list}>
              <View style={styles.icon_container}>
                <Image
                  source={require('../../assets/images/result.png')}
                  style={styles.icon}
                />
              </View>
              <Text style={styles.step_text}>开票完成</Text>
            </View>
          </View>
        </View>
        <View style={styles.content}>
          <View style={styles.content_info}>
            <View style={styles.info_list}>
              <Text style={styles.label}>发票类型:</Text>
              <Text style={styles.label_text}>电子普通发票</Text>
            </View>
            <View style={styles.info_list}>
              <Text style={styles.label}>发票内容:</Text>
              <Text style={styles.label_text}>商品明细</Text>
            </View>
            <View style={styles.info_list}>
              <Text style={styles.label}>抬头类型:</Text>
              <Text style={styles.label_text}>个人</Text>
            </View>
            <View style={styles.info_list}>
              <Text style={styles.label}>抬头名称:</Text>
              <Text style={styles.label_text}>个人</Text>
            </View>
            <View style={styles.info_list}>
              <Text style={styles.label}>开票金额:</Text>
              <Text style={[styles.label_text, styles.lab_money]}>
                {courseData?.actualPrice}元
              </Text>
            </View>
            <View style={styles.info_list}>
              <Text style={styles.label}>开票时间:</Text>
              <Text style={styles.label_text}>{courseData?.updateTime}</Text>
            </View>
            <View style={styles.info_list}>
              <Text style={styles.label}>申请时间:</Text>
              <Text style={styles.label_text}>{courseData?.createTime}</Text>
            </View>
          </View>
          {/* <View style={styles.img_container}>
            <View style={styles.prew}>
              <Image style={styles.img} />
              <View style={styles.num}>
                <Text style={styles.num_text}>共1张</Text>
              </View>
            </View>
            <Text style={styles.desc}>点击预览发票</Text>
          </View> */}
        </View>
        <View style={styles.gap} />
        <View style={styles.order_detail}>
          <View style={styles.order_title}>
            <View style={styles.order_line} />
            <Text style={styles.order_title_text}>订单信息</Text>
          </View>
          {courseData?.smOrderCmCourseList?.map((item) => (
            <OrderPrdList key={item.cmCourseId} courseData={item} />
          ))}

          <View style={styles.order_container_list}>
            <View style={styles.content_info}>
              <View style={styles.info_list}>
                <Text style={styles.label}>订单编号:</Text>
                <Text style={styles.label_text}>{courseData?.orderId}</Text>
              </View>
              <View style={styles.info_list}>
                <Text style={styles.label}>下单时间:</Text>
                <Text style={styles.label_text}>{courseData?.createTime}</Text>
              </View>
              <View style={styles.info_list}>
                <Text style={styles.label}>支付方式:</Text>
                <Text style={styles.label_text}>支付宝</Text>
              </View>
              <View style={styles.info_list}>
                <Text style={styles.label}>支付时间:</Text>
                <Text style={styles.label_text}>{courseData?.updateTime}</Text>
              </View>
            </View>
          </View>
          <View style={styles.order_money_container}>
            <View style={styles.content_info}>
              <View style={styles.info_list}>
                <Text style={styles.label}>商品价格</Text>
                <Text style={styles.label_text}>￥{courseData?.totalPrice}</Text>
              </View>
              <View style={styles.info_list}>
                <Text style={styles.label}>商品优惠</Text>
                <Text style={[styles.label_text, styles.lab_money]}>
                  使用优惠券-{courseData?.freePrice}元
                </Text>
              </View>
            </View>
          </View>
          <View style={styles.detail_btm}>
            <Text style={styles.btm_text}>实付:</Text>
            <Text style={styles.btn_money}>￥{courseData?.actualPrice}</Text>
          </View>
        </View>
        <View style={styles.gap} />
        <View style={styles.order_title}>
          <View style={styles.order_line} />
          <Text style={styles.order_title_text}>用户信息</Text>
        </View>
        <View style={styles.content}>
          <View style={styles.content_info}>
            <View style={styles.info_list}>
              <Text style={styles.label}>用户名:</Text>
              <Text style={styles.label_text}>{courseData?.custName}</Text>
            </View>
            <View style={styles.info_list}>
              <Text style={styles.label}>姓名:</Text>
              <Text style={styles.label_text}>{courseData?.nickName}</Text>
            </View>
            <View style={styles.info_list}>
              <Text style={styles.label}>手机号:</Text>
              <Text style={styles.label_text}>{courseData?.phone}</Text>
            </View>
            <View style={styles.info_list}>
              <Text style={styles.label}>地址:</Text>
              <Text style={styles.label_text}>{courseData?.createBy}</Text>
            </View>
          </View>
        </View>
      </ScrollView>
      {/* <View style={styles.detail_container_btm}>
        <TouchableOpacity  activeOpacity={1} style={styles.send_btn}>
          <Text style={styles.send_btn_text}>发送邮箱</Text>
        </TouchableOpacity>
      </View> */}
    </AreaView>
  );
};

export default InvoiceDetail;
